import { Button, Card, Popconfirm, Switch, Form, Input, Modal, Select } from 'antd';
import Table, { ColumnsType } from 'antd/es/table';
import { useEffect, useState } from 'react';

import commonService from '@/api/services/commonService';
import { IconButton, Iconify } from '@/components/icon';
import { useCommon } from '@/hooks/common';

export default function UserPage() {
  const uri = 'user';
  const cateName = '用户列表';
  const formParams: any = {
    phonenumber: '',
    loginName: '',
    userName: '',
    roleId: '',
    deptId: '',
  };
  const {
    data = {},
    ModalPros,
    onCreate,
    doDel,
    onEdit,
    handleChange,
  } = useCommon({ name: '', userId: '' }, uri, {});

  const columns: ColumnsType<any> = [
    {
      title: '用户ID',
      dataIndex: 'id',
      width: 60,
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      align: 'center',
      width: 100,
    },
    {
      title: '登录名',
      dataIndex: 'loginName',
      align: 'center',
      width: 100,
    },
    {
      title: '手机号',
      dataIndex: 'phonenumber',
      align: 'center',
      width: 100,
    },
    {
      title: '角色',
      dataIndex: 'roleName',
      align: 'center',
      width: 100,
    },
    {
      title: '部门',
      dataIndex: 'deptName',
      align: 'center',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      width: 120,
      render: (status) => <Switch checked={Number(status) === 0} />,
    },
    {
      title: '操作',
      key: 'operation',
      align: 'center',
      width: 100,
      render: (_, record) => (
        <div className="flex w-full justify-center text-gray">
          <IconButton
            onClick={() => {
              onEdit(record);
            }}
          >
            <Iconify icon="solar:pen-bold-duotone" size={18} />
          </IconButton>
          <Popconfirm
            title="确认删除该数据？"
            okText="确定"
            onConfirm={() => doDel(record.id)}
            cancelText="取消"
            placement="left"
          >
            <IconButton>
              <Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
            </IconButton>
          </Popconfirm>
        </div>
      ),
    },
  ];

  return (
    <>
      <Card
        title={cateName}
        extra={
          <Button
            type="primary"
            onClick={() => {
              onCreate({ ...formParams });
            }}
          >
            新增
          </Button>
        }
      >
        <Table
          rowKey="id"
          size="small"
          pagination={{ total: data.totalCount }}
          scroll={{ x: 'max-content' }}
          columns={columns}
          dataSource={data.list}
          onChange={handleChange}
        />
      </Card>
      <CommonModal {...ModalPros} />
    </>
  );
}

function CommonModal({ title, show, formValue, onOk, onCancel }: any) {
  const [form] = Form.useForm();
  const [depts, setDepts] = useState([]);
  const [roles, setRoles] = useState([]);
  useEffect(() => {
    commonService.getListApi('role', { pageNo: 1, pageSize: 100 }).then((res) => {
      setRoles(
        res.list.map((item: any) => {
          return { label: item.roleName, value: item.id };
        }),
      );
    });
    commonService.getListApi('dept', { pageNo: 1, pageSize: 100 }).then((res) => {
      setDepts(
        res.list.map((item: any) => {
          return { label: item.deptName, value: item.id };
        }),
      );
    });
  }, []);
  useEffect(() => {
    form.setFieldsValue({ ...formValue });
  }, [formValue, form]);
  return (
    <Modal
      title={title}
      open={show}
      onOk={() => onOk({ ...formValue, ...form.getFieldsValue() })}
      onCancel={onCancel}
    >
      <Form
        initialValues={formValue}
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
      >
        <Form.Item<any> label="手机号" name="phonenumber" required>
          <Input />
        </Form.Item>
        <Form.Item<any> label="姓名" name="userName" required>
          <Input />
        </Form.Item>
        <Form.Item<any> label="角色" name="roleId" required>
          <Select options={roles} />
        </Form.Item>
        <Form.Item<any> label="部门" name="deptId" required>
          <Select options={depts} />
        </Form.Item>
        <Form.Item<any> label="登陆账号" name="loginName" required>
          <Input />
        </Form.Item>
        <Form.Item<any> label="密码" name="password" required>
          <Input type="password" />
        </Form.Item>
      </Form>
    </Modal>
  );
}
